<!--
 * @Author: your name
 * @Date: 2021-09-10 16:26:56
 * @LastEditTime: 2021-09-10 17:25:06
 * @LastEditors: DESKTOP-3LI1LES
 * @Description: In User Settings Edit
 * @FilePath: \ej-webui\src\pages\customer\detail.vue
-->
<template>
  <div class="customerDetail">
    <div class="btn">
      <el-button type="text" @click="$router.go(-1)">返回</el-button>
    </div>
    <!-- 头部区 -->
    <div class="header">
        <template>
           <img>{{resData.userFace}} 
        </template>
        
        <span class="edit">
            <el-button type="text" @click="editHandler">修改头像</el-button>
        </span>
    </div>
    <!-- 具体信息 -->
    <div class="content">
        <div><b>登录用户</b> {{resData.username}}</div><br>
        <div><b>用户姓名</b> {{resData.realname}}</div><br>
        <div><b>用户手机</b> {{resData.telephone}}</div><br>
        <div><b>用户性别</b> {{resData.gender}}</div><br>
        <div><b>用户角色</b> {{resData.roles[0].name}}</div><br>
        <div><b>用户生日</b> {{resData.birth | fmtDate}}</div><br>
        <div><b>注册时间</b> {{resData.registerTime | fmtDate}}</div><br>
        <div><b>邮箱</b> 暂无</div><br>
        <div><b>用户状态</b> 
        <el-tag>{{resData.status}}</el-tag>
        </div><br>
        
    </div>
  </div>
</template>
<script>
import request from "@/utils/request";
export default {
  data() {
    return {
      resData: [],
      fits: ['fill'],
      url: 'http://81.69.24.232/pet/jz_upload.php'
    };
  },
  methods: {
    findOrderDetailById(id) {
      request.get("/baseUser/findUserDetailsById", { params: { id } }).then((res) => {
        this.resData = res.data;
      });
    },
    // 修改头像
    editHandler() {
        this.$alert('这是一段内容', '标题名称', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
      }
  },
  created() {
    this.findOrderDetailById(this.$route.query.id);
  },
};
</script>
<style scoped>
.item {
  height: 30px;
  line-height: 30px;
}
.edit{
    margin-left: 300px;
}
.header>span:first-child{
    margin-left: 100px;
}
.header{
    height: 100px;
    border: 1px soild black;
    line-height: 30px;
}
b{
    margin-right: 10px;
}
.content{
    margin-top: 50px;
}
</style>